.top {
    height: 90px;
    width: 1250px;
    line-height: 90px;
    border-bottom: 1px solid #f2f2f2;
    margin: 0 auto;
}
.top .logo {
    float: left;
}
.top .logo a {
    display: block;
    width: 170px;
    height: 46px;
    background: url("../img/logo.png");
    margin-top: 20px;
}
.topBar {
    float: left;
    margin-left: 30px;
}
.topBar li {
    float: left;
}
.topBar li a {
    text-align: center;
    font-size: 18px;
    display: block;
    height: 90px;
    padding: 0 18px;
}
.topBar li:first-child a {
    background: #31c27c;
    color: #fff;
}
.topBar li:nth-child( n + 2 ) a:hover {
    color: #31c27c;
}
.searchBar {
    float: left;
    height: 38px;
    position: relative;
    margin-left: 60px;
}
.searchBar input {
    text-indent: 10px;
    width: 218px;
    height: 36px;
    border: 1px solid #c9c9c9;
}
i.icon a {
    position: absolute;
    top:37px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: url("../img/icon_sprite.png");
}
.login {
    float: left;
    margin-left: 22px;
    font-size: 17px;
}
.green-VIP {
    line-height: 38px;
    float: left;
    margin-left: 22px;
}
.green-VIP a {
    text-align-last: center;
    margin-top: 26px;
    display: inline-block;
    margin-left: 10px;
}
.green-VIP a:first-child {
    width: 111px;
    height: 38px;
    background: #31c27c;
    color: white;
}
.green-VIP a:last-child {
    width: 83px;
    height: 36px;
    border: 1px solid #c9c9c9;
}
.header .nav {
    margin-left: 230px;
    height: 51px;
    font-style: 16px;
    height: 51px;
    line-height: 51px;
}
.header .nav li {
    float: left;
    margin-right: 46px;
}
.header .nav li:first-child a {
    color: #31c27c;
}
.recommon,
.new-songs {
    background:linear-gradient(#f2f2f2,#f3f3f3,#f5f5f5,#f6f6f6,#f9f9f9,#fafafa ) ;
}
.recommon {
    height: 494px; 
}
.new-songs {
    height: 775px;
}
.main .w .title {
    height: 80px;
    position: relative;
    color: #333333;
}

.main .w .title h2 {
    position:absolute;
    bottom:0px;
    left: 50%;
    margin-left: -92px;
    font-size: 34px;
    letter-spacing:12px;  
}
.main .w .list {
    height: 84px;
    line-height: 84px;
}
.iconfont {
    float: left;
    width: 7px;
    height: 14px;
    margin-top: 43px;
    margin-left: 23px;
    background: url("../img/icon_sprite.png") ;
}
.icon-fanhui {
    background-position: -161px 0;
}
.icon-gengduo {
    background-position: -120px 0;
}
.main .recommon {
    position: relative;
}
.main .recommon .Arrow {
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -50px;
}
.main .recommon .Arrow a {
    visibility: hidden;
    position: absolute;
    width: 50px;
    height: 100px;
    background: #c9c9c9;
}
.main .recommon:hover .Arrow a {
    visibility:visible;
}
.main .recommon .Arrow a:hover {
    background: #a8a8a8
}
.main .recommon .fanhui {
    left: 0;
}
.main .recommon .gengduo {
    right: 0;
}
.main .recommon:hover .Arrow a {
    display: block
}
.recommon .list {
    margin-left: 304px;
}
.main .w .list li {
    float: left;
    font-size: 15px;
    margin-right: 52px;
}
.main .w .list li:first-child a {
    color: #31c27c;
}
.main .w .content li {
    float: left;
    text-align: left;
    width: 224px;
    height: 308px;
    margin-right: 20px;
}
.main .recommon .w {
    position: relative;
}
.dian {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -61px;
}
.dian li {
    float: left;
    margin-right: 30px;
}
.dian li a {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: rgb(225, 225, 225);
}
.dian li:first-child a {
    background: #666;
}
.dian li:hover a {

    background: #666;
}

.new-songs .list {
    margin-left: 380px;
}
.main .w .content li:nth-child(5n) {
    margin-right: 0;
}
.main .w .content li img {
    display: block;
    width: 224px;
    height: 224px;
}
.main .w .content li img:hover {
    box-shadow: 5px 5px 5px 3px rgba(0, 0, 0, .2);
    transition: all .2s cubic-bezier(0.4, 0, 1, 1);
}
.main .w .content li p.name {
    margin-top: 20px;
    margin-bottom: 8px;
}
p.hui {
    color: #999999;
}
.footer {
    height: 428px;
    background: #333;
    color: #999;
}
.footer a {
    color: #999;
}
.footer .t {
    padding-top: 84px;
    height: 211px;
}
.footer .t div {
    float: left;
}
.footer div .content {
    margin-top: 56px;
}
.footer .t .download {
    width: 466px;
}
.download .content li {
    float: left;
    margin-right: 40px;
    text-align: center;
}

.download .content li:last-child {
    margin-right: 0;
}
i.Client {
    display: block;
    width: 50px;
    height: 50px;
    background: url("../img/footer.png");
    margin-bottom: 18px;
}
.footer li:hover i.Client {
    background-position-y: 47px;
}
.footer .t .PC {
    background-position-x: 3px;
}
.footer .t .Mac {
    background-position-x: -90px;
}
.footer .t .Android {
    margin-left: 3px;
    background-position-x: -177px ;
}
.footer .t .iPhone {
    background-position-x: -267px ;
}
.footer .t .product {
    width: 290px;
}

.footer .t .product li {
    float: left;
    margin-right: 30px;
    text-align: center;
    margin-bottom: 28px;
}
.footer .t .k {
    background-position-x: -365px;
}
.footer .t .Su {
    margin-left: 16px;
    background-position-x: -456px;
}
.footer .t .QPlay {
    background-position-x: -560px;
}

.footer .t .friendlink {
    margin-left: 130px;
    width: 300px;
}

.footer .t .friendlink li {
    float: left;
    width: 100px;
    margin-bottom: 22px;
}
.footer .f {
    border-top: 1px solid #353535;
    text-align: center;
}
.footer .f .bottom-nav {
    margin-top: 30px;
}
.footer .f .link {
    display: inline-block;
    margin: 0 3px;
} 
.copyRight p {
    margin-top: 16px;
}
.footer .download a,
.footer .product a {
    display: block;
    width: 100%;
    height: 100%;
}
.bottom-nav a:hover {
    color: #31c27c;
}